Step 2: Bookmark Model

Create an src folder and add a subfolder model to it. Next, add a file Bookmark.js to the model subfolder with the following content:

class Bookmark {
  constructor(title, url) {
    this.title = title;
    this.url = url;
  }
}

export default Bookmark;

The Bookmark class represents the most essential entity of our application: a bookmark.

In our application, a bookmark has a title and a URL.

In addition to a title and a URL, we would like to assign a unique ID to each bookmark. To that aim, let’s add the uuid library as a dependency.

yarn add uuid

Notice the UUID library on the NPM registry! At the time of writing, this library is up to date, has few open issues, and is downloaded over 75 million times per week! These stats are promising.

Untitled

Now update the Bookmark.js code as follows:

import { v4 as uuidv4 } from "uuid";

class Bookmark {
  constructor(title, url) {
    this.id = uuidv4();
    this.title = title;
    this.url = url;
  }
}

export default Bookmark;

Save and commit the changes.